<template>
    <div class="display" ref="display">
        <div class="dialogue" ref="dialogue">
            <ComBanner @getQuestion="getQuestion"></ComBanner>
            <ul class="list">
                <li :class="['item',item.sender]" v-for="(item,index) in chatList" :key="index">
                   <img v-if="item.sender !== 'time'" class="img" :src="item.senderAvatar" alt="" >
                    <template>
                        {{item.senderAvatar}}
                    </template>
                    <template  v-if="item.sender === 'gpt'">
                        <div class="aiService">
                            <div class="ai">智能AI客服</div>
                            <span v-if="index === chatList.length -1 && item.thinking" class="text">正在思考中...</span>
                            <div v-else class="content">
                                <div  :class="['contentText',index === chatList.length -1 && isLoading &&'loading']">{{ item.content }}</div>
                                <div class="prompt" v-if="index === chatList.length -1? answering :true">
                                    <div class="p_left">
                                        <span class="iconfont icon icon-31tishi"></span>
                                        <span class="promptText">此回复由AI生成，仅供参考</span>
                                    </div>
                                    <div class="p_right">
                                        <span :class="['iconfont','icon','icon-dianzan1']" @click="item.status === 0 &&praise($event,index)"></span>
                                        <span :class="['iconfont','icon','tread','icon-dianzan1']" @click=" item.status === 0 && tread($event,index)"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.sender === 'client'">
                        <div class="staffService">
                            <div class="content">
                                <img v-if="item.type === 'img'" class="imgSrc" :src="item.imgSrc" alt="">
                                <span  v-else class="text">{{ item.content }}</span>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.sender === 'time'" >
                        <div v-if="!item.figure">{{item.content}} </div>
                        <div v-else><span>{{item.content}}</span>为你服务 </div>
                    </template>
                    <template v-else-if="item.sender === 'service'">
                        <div class="staffService">
                            <div class="staff">{{ item.staff }}</div>
                            <div class="content">
                                <img v-if="item.type === 'img'" class="imgSrc" :src="item.imgSrc" alt="">
                                <span  v-else class="text">{{ item.content }}</span>
                            </div>
                        </div>
                    </template>
                </li>
            </ul>
        </div>
        <div ref="tabBar" class="tabBar">
            <div v-if="false" class="stop" @click="stopGenerate">
                <img src="@/assets/image/stop.png" alt="" class="stop_img">
                <span class="stop_test">停止生成</span>
            </div>
            <div class="footer">
                <ul class="contact">
                    <li class="item">
                        <a href="tel:400-8600-993">
                            <span class="iconfont icon icon-a-dianhua1"></span>
                            <span class="text">客服电话</span>
                        </a>
                    </li>
                    <li class="item" @click="changeOver">
                        <span class="iconfont icon icon-kefu-ermai"></span>
                        <span class="text">人工客服</span>
                    </li>
                    <li class="item" @click="openFeedback">
                        <span class="iconfont icon icon-a-pingjia21"></span>
                        <span class="text">评价与反馈</span>
                    </li>
                </ul>
                <div class="message">
                    <div class="camera">
                        <input id="file" type="file" ref="file"  @change="checkFile"/>
                        <label for="file"><span class="iconfont icon icon-tupianshangchuan"></span></label>
                    </div>
                    <form action="#" @submit="openSend">
                        <textarea class="inp" ref="details" :rows="rows" v-model.trim="chatMsg" placeholder="请在此输入你的问题"></textarea>
                        <div class="send" @click="openSend"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--    showFeedback-->
    <ComFeedback :sessionId="sessionId || null" :showFeedback="showFeedback" @closeFeedback="closeFeedback" />
    <!--    showDialog-->
    <ComDialog :treadData="treadData" :ShowDialog="showDialog" @closeDialog="closeDialog" @winCloseDialog="winCloseDialog"/>
</template>

<script setup>
import {getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue';
import compressImg from '@/utils/compressImg.js'
import {useWebSocket} from '@vueuse/core'
import ComBanner from "@/components/comBanner.vue";
import ComDialog from "@/components/ComDialog.vue";
import ComFeedback from "@/components/ComFeedback.vue";
import {getFeedbackMessage} from "@/utils/api.js";
import {ElMessage} from "element-plus";

const { proxy } = getCurrentInstance();
const { mittBus } = proxy;

const dialogue = ref()
const details = ref()
const chatList = ref([])// 聊天数据
const chatMsg = ref() // 对话文本
const thought = ref(false)// 思考中
const answering = ref(false)// 回答中
const interFlow = ref(false)// 快捷问题
const showDialog = ref(false) // Gpt内容反馈
const showFeedback = ref(false) // 评价与反馈
const treadData = ref({}) // Gpt内容反馈
const heartbeat = ref(false)

const isLoading = ref(false)
const sessionId = ref(null)// 对话id


const isTypeImg = ref('txt') // 对话id
const answerer = ref(0)//gpt 0 坐席1
let webSocketUrl = ref(import.meta.env.VITE_WS_ADDRESS_URL)
const CTK = localStorage.getItem('CTK')
let socket1
let socket2
mittBus.on('CTK',(v)=>{
    socket1 = webSocket(v,answerer.value)
})
function exists(ctk){
    if(ctk)  socket1 = webSocket(ctk,answerer.value)
}


// 发送
function openSend(event){
    event.preventDefault()
    if(chatMsg.value === '') return
    thought.value = true
    sendMsg(false,chatMsg.value)
}


// 发送快捷回复
function getQuestion(v){
    thought.value = true
    sendMsg(true,v)
}
// 发送消息方法
function sendMsg(isQuickReply,content){
    const obj = {
        content,
        sender:'client',
        type:isTypeImg.value,
        finished:true,
        senderAvatar:'https://gd-hbimg.huaban.com/0594aa557bf031bfbef13657b75ff82cb865c6fbb1be-3OCNiV_fw1200'
    }
    if(dialogue.value.scrollHeight >= 680){
        nextTick(()=>{
            dialogue.value.scrollTop = dialogue.value.scrollHeight
        })
    }
    chatList.value.push(obj)
    if(operation(answerer.value===0?socket1:socket2,'Status') === 'CLOSED'){
        socket1.open()
    }
    let  data = {
        input: content,
        businessCode:'generate',
        customerServicePlatform:'myl',
        sessionId:sessionId.value,
        type:isTypeImg.value,
    }
    if(answerer.value===1){//
        delete data.customerServicePlatform
    }
    operation(answerer.value===0?socket1:socket2,'Send',JSON.stringify(data))
    if(!isQuickReply){
      chatMsg.value = ''
    }
    WatchData()
}
// 发送图片
const file = ref()
function checkFile(){
    const newFile = file.value.files[0]
    compressImg(newFile,0.1).then(res => {//compressImg方法见附录
        console.log(res)
    })
}
// 人工客服
function changeOver(){
    answerer.value = 1
    socket2 = webSocket(CTK,answerer.value)
    let  data = {
        input: '转接人工',
        businessCode:'generate',
        customerServicePlatform:'myl',
        type:isTypeImg.value,
    }
    heartbeat.value = true
    operation(socket2,'Send',JSON.stringify(data))
    WatchData()
}

// 赞
function praise(e,i){
    getFeedbackMessage({feedback: 1}).then(v =>{
        if(v.c === '100'){
            e.target.classList.remove('icon-dianzan1')
            e.target.classList.add('icon-dianzan')
            chatList.value[i].status = 1
        }
    })
}
// 踩
function tread(e,i){
    console.log(124)
    showDialog.value = true
    treadData.value = {
        messageId: 12,
        myIndex: i,
        event: e
    }
}
// 踩踏评论
function winCloseDialog(value){
    showDialog.value = false
    let {event,myIndex} = value
    event.target.classList.remove('icon-dianzan1')
    event.target.classList.add('icon-dianzan')
    chatList.value[myIndex].status = -1
}
function closeDialog(value) {
    showDialog.value = value
}


// 评价反馈
function openFeedback() {
    if(sessionId.value !== '') return  ElMessage({
        message: '暂时无法评价',
        type: 'warning',
        grouping: true
    })
    showFeedback.value =true
}
function closeFeedback(value) {
    showFeedback.value =value
}

// 输入框高度自适应
const rows = ref(1)
let tabBar = ref()
const display = ref()
function adjustTextareaSize(){
    const textarea = details.value
    textarea.addEventListener('input', (e) => {
        textarea.style.height = 'auto';
        if(e.target.scrollHeight > 100){
          textarea.style.height =  '100px';
        }else {
          textarea.style.height = e.target.scrollHeight + 'px';
        }
    });
    dialogue.value.style.height = (display.value.scrollHeight-tabBar.value.scrollHeight)+'px'
    dialogue.value.scrollTop = dialogue.value.scrollHeight
}


watch(() => chatMsg.value, (v) => {
    nextTick(()=>{adjustTextareaSize()});
},{immediate:true})



// 判断手机机型
function isIos(){
    const u = navigator.userAgent;
    const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS
    if(isAndroid){
        file.value.capture = 'camera'
        file.value.accept = 'image/*'
    }
}
onMounted(()=>{
    exists(CTK)
    nextTick(()=>{adjustTextareaSize()});
    isIos()
})

// websocket
function webSocket(ctk,answerer){
    const { status, data, send, open, close } = useWebSocket(`${webSocketUrl.value}?CTK=${ctk}&answerer=${answerer}`)
    return {status, data, send, open, close}
}

// websocket 操作
function operation(Socket,StatusNum,data = undefined){
    if(StatusNum === 'Send' && data){
        Socket.send(data)
        return
    }
    if(StatusNum === 'Status'){
        return  Socket.status.value
    }
    if(StatusNum === 'Close'){
        return  Socket.close()
    }
    if(StatusNum === 'Data'){
        return JSON.parse(Socket.data.value)
    }

}
// 流逝返回
let text = ref('')
function WatchData(){
    watch(()=>operation(answerer.value===0?socket1:socket2,'Data'),(v)=>{
        thought.value = false
        answering.value =  watchSocket(v)
    })
}
// 返回数据处理
function watchSocket(data){
    let obj = {
        content:'',
        messageId:0,
        sender:'',
        type:'',
        thinking:true,
        finished:false,
        senderAvatar:'',
        senderName:'',
    }
    let content
    let thinking

    switch(data?.c){
        case '100':
            sessionId.value = data.d.sessionId
            obj.sender = data.d.sender
            obj.messageId = data.d.messageId
            obj.senderAvatar = data.d.senderAvatar
            obj.senderName = data.d.senderName
            obj.finished = data.d.finished
            content = data.d.content
            thinking = data.d.thinking
            break;
        case '200':
            sessionId.value = data.d.sessionId
            obj.sender = data.d.sender
            obj.senderAvatar = data.d.senderAvatar
            obj.senderName = data.d.senderName
            obj.finished = data.d.finished
            obj.content = data.d.content
            break;
        case '401':
            obj = ' '
            break;
        case '600':
            obj = data.d
            break;
        case '601':
            obj = data.d
            break;
        default:
            obj = data
    }
    isLoading.value = true
    text.value += content
    if(chatList.value[chatList.value.length-1].finished){
        chatList.value.push(obj)
    }
    if(data?.c === '200'){
        chatList.value[chatList.value.length-1].thinking = false
    }
    if(!data?.d.finished){
        chatList.value[chatList.value.length-1].content =  text.value
        chatList.value[chatList.value.length-1].thinking =  thinking
    }else {
        text.value = ''
        isLoading.value = false
    }
    console.log(data?.d.finished)
    return data?.d.finished
}

// 数据处理
function addItem(...data){
    console.log(data)
}

onBeforeUnmount(()=>{
    mittBus.off('CTK')
})
// 刷新事件
document.addEventListener("visibilitychange", function() {
    // console.log(document.visibilityState)
    if (document.visibilityState === 'hidden') {
        operation(socket1,'Close')
    }
});
</script>

<style lang="scss" scoped>
.display{
      width: 100%;
      height: 100vh;
      background: #F1F9FF;
      flex-direction: column;
      padding: 0 30px;
      box-sizing: border-box;
    overflow: hidden;
      .dialogue{
        width: 100%;
        height: calc(100% - 300px);
        overflow-y: auto;
        -ms-overflow-style: none;
        .list{
            display: flex;
            flex-direction: column;
            gap: 30px 0;
            margin-bottom: 10px;
            .item{
                width: 100%;
                display: flex;
                align-items: flex-start;
                .img{
                    width: 58px;
                    height: 58px;
                    border-radius: 50%;
                }
                .staffService{
                    width: 534px;
                    margin-left: 20px;
                    .staff{
                        font-size: 24px;
                        color: #3D3D3D;
                        line-height: 42px;
                    }
                    .content{
                        margin-top: 10px;
                        border-radius: 0 15px 15px 15px;
                        word-break: break-all;
                        box-sizing: border-box;
                        display: inline-block;
                        padding: 20px;
                        background: #fff;
                        font-size: 28px;
                        color: #3D3D3D;
                        white-space: pre-wrap;
                        line-height: 50px;
                        display: flex;
                        flex-direction: column;
                        .imgSrc{
                            width: 260px;
                        }
                    }
                }
                &.client{
                    flex: 1;
                    flex-direction: row-reverse;
                    .img{
                        margin-top: 15px;
                    }
                    .staffService{
                        margin-right: 20px;
                        display: flex;
                        justify-content: flex-end;
                        .content{
                            margin-top: 0;
                            background: #D8EFFF;
                            border-radius: 15px 0 15px 15px;
                            padding: 24px 20px;
                        }
                    }
                }
                &.gpt{
                    flex: 1;
                    .aiService{
                        margin-left: 20px;
                        width: 534px;
                        .ai{
                            font-size: 24px;
                            color: #3D3D3D;
                            line-height: 42px;
                        }
                        .text{
                            display: inline-block;
                            background: #FFFFFF;
                            padding: 24px 20px;
                            font-size: 28px;
                        }
                        .content{
                            margin-top: 10px;
                            border-radius: 0 15px 15px 15px;
                            color: #0B0E0E;
                            line-height: 40px;
                            white-space:pre-wrap;
                            padding: 24px 20px;
                            background: #FFFFFF;
                            .contentText {
                                font-size: 28px;
                                color: #3D3D3D;
                                line-height: 50px;
                                word-break: break-all;
                                white-space: pre-wrap;
                                @keyframes BLINK {
                                    to {
                                        visibility: hidden
                                    }
                                }
                                &.loading::after {
                                    -webkit-animation: BLINK 1s steps(5, start) infinite;
                                    animation: BLINK 1s steps(5, start) infinite;
                                    content: "▎";
                                    font-size: 16px;
                                    left: 23px;
                                    transform: translateY(-50%) scaleX(.7);
                                    vertical-align: baseline
                                }
                            }
                            .prompt{
                                position: relative;
                                margin-top: 16px;
                                display: flex;
                                &:before{
                                    position: absolute;
                                    content: '';
                                    display: inline-block;
                                    height: 1px !important;
                                    width: 100%;
                                    background: #F4F4F4;
                                }
                                .p_left{
                                    margin-top: 16px;
                                    flex: 1;
                                    color: #BABABA;
                                    display: flex;
                                    align-items: center;
                                    .icon{
                                        font-size: 28px;
                                    }
                                    .promptText{
                                        margin-left: 6px;
                                        font-size: 24px;
                                    }
                                }
                                .p_right{
                                    margin-top: 16px;
                                    margin-left: auto;
                                    margin-right: 0;
                                    display: flex;
                                    gap: 0 30px;
                                    .icon{
                                        font-size: 28px;
                                        color: #3D3D3D;
                                    }
                                    color: #197CFD;
                                    .tread{
                                        transform: rotateZ(-180deg);
                                    }
                                }
                            }
                            .answering{
                                display: flex;
                                .img{
                                    width: 30px;
                                    height: 30px;
                                }
                            }
                        }
                    }

                }
                &.time{
                    font-family: "Regular", serif;
                    font-size: 24px;
                    font-weight: 400;
                    width: 500px;
                    line-height: 42px;
                    color: #8C8C8C;
                    margin: 0 auto;
                    text-align: center;
                    justify-content: center;
                    span{
                        color: #197CFD
                    }
                }
                &.service{
                    flex: 1;
                    //.staffService{
                    //    width: 534px;
                    //    margin-left: 20px;
                    //    .staff{
                    //        font-size: 24px;
                    //        color: #3D3D3D;
                    //        line-height: 42px;
                    //    }
                    //    .content{
                    //        margin-top: 10px;
                    //        border-radius: 0 15px 15px 15px;
                    //        word-break: break-all;
                    //        line-height: 40px;
                    //        box-sizing: border-box;
                    //        display: inline-block;
                    //        padding: 20px;
                    //        background: #fff;
                    //        .text{
                    //            font-size: 28px;
                    //            color: #3D3D3D;
                    //            word-break: break-all;
                    //            white-space: pre-wrap;
                    //        }
                    //    }
                    //}
                }
            }
        }
        &::-webkit-scrollbar { width: 0 !important }
      }
      .tabBar{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        //padding:30px 0 0;
        .stop{
          width: 190px;
          height: 60px;
          background: #e0edf7b3;
          box-shadow: 0 18px 26px 0 rgba(154,193,230,0.39);
          border-radius: 30px;
          color:#187CFD ;
          margin: 0 auto 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          .stop_img{
            width: 30px;
            height: 30px;
          }
          .stop_test{
            margin-left: 10px;
            font-size: 24px;
          }
        }
        .footer{
          width: 100%;
          padding:0 20px 30px;
          box-sizing: border-box;
          background: #fff;
          display: flex;
          flex-direction: column;
          .contact{
            display: flex;
            align-items: center;
            gap: 0 20px;
            margin: 20px 0;
            height: 48px;
            .item{
              padding: 0 20px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 30px;
              background: #F1F9FF;
              cursor: pointer;
              a{
                text-decoration:none;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .icon{
                color: #197CFD;
                font-size: 24px;
              }
              .text{
                font-family: "Regular",serif;
                font-size: 24px;
                margin-left: 6px;
                color: #3D3D3D;
              }
            }
          }
          .message{
            width: 690px;
            border: 2px solid #197CFD;
            border-radius: 50px;
            margin: 0 auto ;
            display: flex;
            align-items:center;
            justify-content: space-between;
            padding: 10px 0;
            .camera{
              margin: 0 20px;
              .icon{
                color: #D4E4F9;
                font-size: 32px;
              }
              input{
                display: none;
                  //overflow: hidden;
              }
              label{
                  display: flex;
                  justify-items: center;
                  align-items: center;
              }
            }
            form{
                flex: 1;
                display: flex;
                align-items: center;
            }
            .inp{
              padding: 10px 0 ;
              margin: auto 0 auto 10px;
              box-sizing: border-box;
              flex: 1;
              line-height: 40px;
              -ms-overflow-style: none;
              border: none;
              resize: none;
              outline: none;
              font-size: 28px;
              &::-webkit-input-placeholder{
                color: #BABABA;
                font-size: 24px;
              }
              &::-webkit-scrollbar {
                width: 0 !important;
                line-height: 100%;
              }
            }
            .send{
              width: 70px;
              height: 70px;
              border-radius: 50%;
              margin-right: 10px;
              margin-left: 20px;
              background: #197CFD url('@/assets/image/happen.png') center / 30px no-repeat;
            }
          }
        }
  }
}
</style>